<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>支付成功</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/layer/layer.js" type="text/javascript">
		
	</script>

	<style type="text/css">
		* {
			margin: 0rem;
			padding: 0rem;
			text-decoration: none;
			list-style: none;

		}

		html,
		body {
			background-color: #fff;
			width: 100%;
			height: 100%;
			/*font-size:  100rem;*/
			font-size: calc(100vw / 7.5);
			font-family: "microsoft yahei";
		}

		/*内容*/

		.content {
			box-sizing: border-box;
			padding: 0rem 0rem 0rem 0.32rem;
			width: 100%;
		}

		.content {
			width: 100%;
		}

		.content form {
			width: 100%;
		}


		.content form .sub {
			position: absolute;
			bottom: 0.8rem;
			left: 0.64rem;
			width: 6.25rem;
			height: 0.9rem;
			background: #7f9eba;
			color: #fff;
		}

		.content form .top {
			position: relative;
			width: 100%;
			padding-right: 0.32rem;
			height: 1.22rem;
			line-height: 1.22rem;
			border-bottom: 1px solid #e0f0f0;
		}

		.content form .top span {
			font-size: 0.28rem;
			display: inline-block;
			height: 1.22rem;
			line-height: 1.22rem;
			vertical-align: top;
			color: #333;
		}

		/*.content form .top info*/

		.content form .top button {
			position: absolute;
			top: 0.4rem;
			right: 0.32rem;
			width: 1.34rem;
			height: 0.52rem;
			line-height: 0.52rem;
			padding: 0rem;
			color: #fff;
			background: #9cb1c3;
		}

		.content form .bottom {
			text-align: left;
			margin-top: 0.38rem;
			font-size: 0.28rem;
			color: #9a9a9a;
		}
		#copyTarget{
			display: inline-block;
			border: 0px;
			position: absolute;
			top: 0.1rem;
			left:1.28rem;
		}
		#copyTarget,#hiddenText{
			opacity: 0.5;
			/* font-size: 0.26rem; */
			height: 1.1rem;
			width: 4.3rem;
			/* width: 4rem; */
			z-index: 1;
			line-height: 1.1rem;
			font-size: 0.26rem;


		}
		#hiddenText{
			opacity: 0;
			position: absolute;
			/* top: 1.1rem; */
			left: 1.26rem;
			padding: 0rem;
			
		}
	</style>
</head>

<body>
	<script>
		$(function () {
			$("#wrapper").load("../header.html")

		})
		setTimeout(function () {
			$("#wrapper").find(".con").html("支付成功").end().find(".dot img").css("display", "none");
			$(".arrow").on("tap", function () {
				window.location.href = "weixinzhifu.html";
			})
		}, 200)
		setTimeout(function () {
			$("#wrapper").find(".con").html("支付成功").end().find(".dot img").css("display", "none");
			$(".arrow").on("tap", function () {
				window.location.href = "weixinzhifu.html";
			})
		}, 2000)
	</script>

	<div class="wrapper" id="wrapper"></div>


	<div class="content">
		<form action="#" method="post">
			<div class="top">
				<span>订单号：</span>
				<!-- <span class="info"></span> -->
				<input id="copyTarget" value="" readonly class="info">
				<textarea id="hiddenText" class="hidden info" readonly></textarea>
				<button type="button" id="copyButton">复制</button>
			</div>
			<div class="bottom">请联系客服备注订单号</div>

			<!-- 复制 -->
			

			<input type="button" class="sub" value="支付成功">
		</form>
	</div>
	<script src="../js/mui.min.js"></script>
	<script>
		$(".info").html(localStorage.order_id);
		
		$("#copyTarget").val(localStorage.order_id)

		document.getElementById("copyButton").addEventListener("click", function () {
			copyToClipboard(document.getElementById("copyTarget"));
			layer.msg("复制成功")
		});

		function copyToClipboard(elem) {
			var target = document.getElementById("hiddenText");
			target.textContent = elem.value;
			console.log(target.textContent);
			select(target);
			document.execCommand("copy");
		}

		function select(element) {
			var selectedText;

			if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
				element.focus();
				element.setSelectionRange(0, element.value.length);

				selectedText = element.value;
			} else {
				if (element.hasAttribute('contenteditable')) {
					element.focus();
				}

				var selection = window.getSelection();
				var range = document.createRange();

				range.selectNodeContents(element);
				selection.removeAllRanges();
				selection.addRange(range);

				selectedText = selection.toString();
			}

			return selectedText;
		}
	</script>
</body>

</html>